import 'common/css/com.less';
import 'slick-carousel/slick/slick.less';
import './index.less';
import $ from 'jquery';
import ScrollReveal from 'scrollreveal';
import raf from 'raf';
import Blazy from 'blazy';
import bodymovin from 'lottie-web';
import 'layout/header/index.js';
import 'slick-carousel/slick/slick.min';
import 'layout/footer/index.js';

// const WRAPPER = $('#page_wrapper');

// 首页banner
const oSlick = {
  dom: null,
  isMobile: false,
  slickInited: false,
  barInterval: null,
  currentSlide: 0,
  changeSetInterval: null,
  init: function() {
    if (!this.slickInited) {
      console.time('oSlick');
      let jSlick = (this.dom = $('#slick_dom'));

      jSlick.find('.mobile').remove();

      if (jSlick.length <= 0) return false;
      this.slickInited = true;
      this.bind();

      console.timeEnd('oSlick');
    }
  },
  bind: function() {
    const self = this;
    const jSlick = self.dom;

    if ($('.slick-initialized').length > 0) {
      return false;
    }

    // http://kenwheeler.github.io/slick/
    jSlick.slick({
      dots: true,
      autoplay: true,
      autoplaySpeed: 8000,
      infinite: true,
      slidesToShow: 1,
      slidesToScroll: 1,
      pauseOnHover: false,
      arrows: false,
      draggable: true,
      pauseOnFocus: false,
      customPaging: function(slider, i) {
        // console.log(slider,i)
        let bar = $(`<div class="bar_${i}"></div>`);
        this.barInterval = setInterval(function() {
          if (slider.currentSlide === i) {
            bar.addClass('rotation');
          }
          if (slider.currentSlide !== i) {
            bar.removeClass('rotation');
          }
        }, 1);
        return bar;
      }
    });

    jSlick.on('afterChange', function(event, slick, currentSlide, nextSlide) {
      self.currentSlide = currentSlide;
    });

    jSlick.mouseup(function(event) {
      let bars = $(`.bar_${self.currentSlide}`);
      bars.removeClass('rotation');
      // jSlick.slick("slickGoTo", self.currentSlide, true);
    });

    window.addEventListener('visibilitychange', function() {
      let bars = $(`.bar_${self.currentSlide}`);
      bars.removeClass('rotation');
      jSlick.slick('slickGoTo', self.currentSlide, false);
    });

    self.arrowShow();
  },
  arrowShow: function() {
    const self = this;
    const jSlick = self.dom;
    const iSlickW = jSlick.width();

    jSlick
      .mousemove(function(event) {
        let iX = event.pageX;

        if (iX < iSlickW / 3) {
          jSlick.addClass('show_arrow_left').removeClass('show_arrow_right');
        } else if (iX > (iSlickW * 2) / 3) {
          jSlick.addClass('show_arrow_right').removeClass('show_arrow_left');
        } else {
          jSlick.removeClass('show_arrow_left show_arrow_right');
        }
      })
      .mouseleave(function() {
        jSlick.removeClass('show_arrow_left show_arrow_right');
      });
  },
  destroy: function() {
    this.slickInited = false;
    clearInterval(self.changeSetInterval);
    clearInterval(this.barInterval);
    let sWinWidth = $(window).width();
    if (sWinWidth <= 750) {
      let banner = $('.banner_img');
      if (banner.length > 1) {
        this.dom &&
          this.dom.slick &&
          this.dom.slick('unslick').off('mousemove mouseleave');
      }
    }
  }
};

let oProduct = {
  wrap: null,
  tabs: null,
  bodymovinArr: new Array(8),
  animationDom: null,
  trigger: null,
  // time: [],
  init: function() {
    this.wrap = $('#our_pro');
    this.tabs = this.wrap.find('>.our_pro_title> ul > li');
    this.animationDom = $('.our_pro_animation');
    this.bind();
  },
  bind: function() {
    const self = this;
    const tabs = self.tabs;

    self.bodymovinInit(0);

    tabs.hover(
      function() {
        let oThis = $(this);

        self.trigger = setTimeout(function() {
          self.hover(oThis);
        }, 90);
      },
      function() {
        clearTimeout(self.trigger);
      }
    );
  },
  bodymovinInit: function(i) {
    let self = this;

    if (!self.bodymovinArr[i]) {
      self.bodymovinArr[i] = self.bodymovin(i);
      self.bodymovinArr[i].play();
    }
  },
  bodymovin: function(i) {
    return bodymovin.loadAnimation({
      path: `home/bodymovin/ani_${i}/data.json`, // json文件路径
      loop: true,
      name: `bodymovin_${i}`,
      autoplay: false,
      renderer: 'svg', // 渲染方式，有"html"、"canvas"和"svg"三种
      container: document.getElementById(`our_pro-animation_${i}`)
    });
  },
  hover: function(oThis) {
    const self = this;
    const index = oThis.index();
    const content = self.wrap.find('div.our_pro_content > div');
    const arrow = self.wrap.find('div.our_pro_title >p');
    const left = 48 + index * 138;
    arrow.css('left', left);
    oThis
      .addClass('current')
      .siblings()
      .removeClass('current');

    content
      .eq(index)
      .addClass('current')
      .siblings('div')
      .removeClass('current');

    let arr = [0];
    if (arr.indexOf(index) === -1) {
      self.bodymovinInit(index);
      arr.push(index);
    } else {
      self.bodymovin(index);
    }
    // requestAnimationFrame;
  },
  destroy: function() {
    this.tabs.off('hover');
    this.bodymovinArr.forEach((item) => {
      item.destroy();
    });
    this.bodymovinArr = [];
  }
};

let imgar = [];
for (let i = 1; i < 10; i++) {
  imgar[i] = new Image();
  imgar[i].src = `/home/industry/industry_travel_img_0${i}_2x.jpg`;
  imgar[i].onload = function() {
    this.width = '100%';
    this.height = '100%';
  };
}

// 首页解决方案 pc
let oSolution = {
  wrap: null,
  tabs: null,
  trigger: null,
  // time: [],
  init: function() {
    this.wrap = $('#travel_plan');
    this.tabs = this.wrap.find('>div> ul > li');
    this.bind();
  },
  bind: function() {
    const self = this;
    const tabs = self.tabs;

    tabs.hover(
      function() {
        let oThis = $(this);

        self.trigger = setTimeout(function() {
          self.hover(oThis);
        }, 90);
      },
      function() {
        clearTimeout(self.trigger);
      }
    );
  },
  hover: function(oThis) {
    const self = this;
    const wrap = self.wrap;
    const index = oThis.index();
    const content = self.wrap.find('div > div.travel_plan_right_con > div');
    oThis
      .addClass('current')
      .siblings()
      .removeClass('current');

    content
      .eq(index)
      .addClass('current')
      .siblings('div')
      .removeClass('current');

    wrap.css({
      background: `url(${imgar[index + 1].src}) no-repeat center bottom`,
      'background-size': 'cover'
    });
  },
  destroy: function() {
    this.tabs.off('hover');
  }
};

// 开发文档
let oDev = {
  tab: null,
  init: function() {
    this.tab = $('.dev_document_tabs');
    this.bind();
  },
  bind: function() {
    const self = this;
    const tab = self.tab;
    tab.on('touchstart', function() {
      $(this).css('background', '#FFFFFF');
    });
    tab.on('touchend', function() {
      $(this).css('background', '#E5EbF5');
    });
  },

  destroy: function() {
    this.tab.off('touchstart touchend');
  }
};

// 首页延迟加载
let oBlazy = {
  blazy: null,
  init: function() {
    this.blazy = new Blazy();
    this.bind();
  },
  bind: function() {
    // let self = this;
  },
  destroy: function() {
    let self = this;

    self.blazy.destroy();
  }
};

let animation = {
  industry: null,
  business: null,
  document: null,
  quick: null,
  document_h5: null,
  industry_h5: null,
  init: function() {
    this.industry = $('.industry_advantage>ul');
    this.business = $('.business_development>ul');
    this.document = $('.dev_document .pc');
    this.document_h5 = $('.dev_document .mobile');
    this.quick = $('.quick_build>ul');
    this.industry_h5 = $('.industry_advantage_data');
    this.bind();
  },
  bind: function() {
    this.conf(this.industry, '20px', 350);
    this.conf(this.business, '20px', 350);
    this.conf(this.document, '10px', 400);
    this.conf(this.document_h5, '10px', 400);
    this.conf(this.quick, '20px', 350);
    this.conf(this.industry_h5, '20px', 350);
  },
  conf: function(ele, sub, speed) {
    let eleLenght = ele.children().length;
    function animation(i) {
      return {
        reset: false, // 滚动鼠标时，动画开关(默认是false没有打开鼠标滚动的动画开关)
        enter: 'bottom', // 动画开始的方向
        move: '50px',
        distance: sub,
        duration: speed, // 动画持续时间
        delay: (i + 1) * 130, // 延迟
        opacity: 0, // 初始透明度  (0.2到1的效果)
        easing: 'ease' // 动画效果// 缓动'ease', 'ease-in-out'，'linear'...
      };
    }
    for (var i = 0; i < eleLenght; i++) {
      ScrollReveal().reveal(ele[0].children[i], animation(i));
    }
  },
  destroy: function() {
    ScrollReveal().destroy();
  }
};

const homePage = {
  init() {
    console.time('homeInit');

    $(function() {
      raf(() => {
        // domContentLoad完后立即加载lazyload的图片
        oBlazy.blazy.load($('.b-lazy'), true);
      });
    });
    oSlick.init();
    oProduct.init();
    oSolution.init();
    oBlazy.init();
    oDev.init();
    animation.init();
  },
  destroy() {
    oSlick.destroy();
    oProduct.destroy();
    oSolution.destroy();
    oBlazy.destroy();
    oDev.destroy();
    animation.destroy();
  }
};

$(function() {
  homePage.init();
});
